<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<!----导入bootstrap的外部css文件---->
<link href="${basePath}bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<link href="${basePath}bootstrap-3.3.7-dist/css/style.css"
	rel="stylesheet">
<link href="${basePath}bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet" />
<!----导入bootstrap的依赖的jquery文件---->
<script src="${basePath}bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<!----导入bootstrap的外部javascript文件---->
<script src="${basePath}bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- pagination -->
<link href="${basePath}pagination-2.0.7/css/pagination.css"
	rel="stylesheet" />
<script src="${basePath}pagination-2.0.7/js/pagination.js"></script>
<style>
/*主体div*/
#container {
	/*相对于body，主体框架居中*/
	margin: 0px auto;
	width: 1000px;
}
</style>

<script type="text/javascript">
	$(function() {
		doQuery();
	});

	function doQuery() {

		$.ajax({
			type : 'POST',
			url : '${basePath}AdminInfoQueryServlet2',
			dataType : "json", // 指定返回类型
			data : $('#queryform').serialize(),// 要提交的表单 
			success : function(rows) {
				console.info("ajax data::");
				console.info(rows);
				// 分页控件
				doPaging(rows);
			},
			error : function() {
				alert("查询出现问题");
			}
		});
	}

	// 调用分页控件
	function doPaging(pageDatas) {
		$('#page').pagination({
			dataSource : pageDatas,
			//dataSource:'${basePath}AdminInfoQuery4PagerServlet',
			pageSize : 3,
			showGoInput : true,
			showGoButton : true,
			callback : function(data, pagination) {
				// template method of yourself
				//var html = template(data);
				console.info("show data::");
				console.info(data);
				var htmlInfo = formatResultData(data);
				$("#tb_query_adminInfo").html(htmlInfo);
			}
		})
	}
	// 格式化结果串
	function formatResultData(data){
		// 查询结果组织的字符串
		var queryContent = "";
		$.each(data, function(index, value) {
			queryContent += "<tr>";
			queryContent += "<th>";
			queryContent += data[index].adminName;
			queryContent += "</th>";

			queryContent += "<th>";
			queryContent += value.adminName;
			queryContent += "</th>";

			queryContent += "<th>";
			queryContent += value.adminMail;
			queryContent += "</th>";

			queryContent += "<th>";
			queryContent += value.adminTel;
			queryContent += "</th>";

			queryContent += "<th>";
			queryContent += value.adminBirthday;
			queryContent += "</th>";

			queryContent += "<th>";
			queryContent += value.adminName;
			queryContent += "</th>";

			queryContent += "</tr>";

		});
		// 返回格式化的结果串
		return queryContent;
	}
</script>

</head>

<body>
	<div id="container">
		<form id="queryform" class="form-horizontal">
			<div class="form-group"></div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" id="adminName"
						name="adminName" placeholder="用户名">
				</div>
				<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" id="adminMail"
						name="adminMail" value="${modifyAdminB.adminMail }"
						placeholder="邮箱">
				</div>

			</div>
			<div class="form-group">


				<label for="inputEmail3" class="col-sm-2 control-label">电话</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" id="adminTel"
						name="adminTel" value="${modifyAdminB.adminTel }" placeholder="电话">
				</div>
				<label for="inputEmail3" class="col-sm-2 control-label">出生日期</label>
				<div class="col-sm-4">
					<input type="date" class="form-control" id="adminBirthday"
						name="adminBirthday" value="${modifyAdminB.adminBirthday }"
						placeholder="出生日期">
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-offset-4 col-sm-10">
					<button type="button" class="btn btn-default" onclick="doQuery();">查询</button>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button type="reset" class="btn btn-default">重置</button>
				</div>
			</div>
		</form>
		<div class="bs-example" data-example-id="hoverable-table">
			<table class="table table-hover">
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>邮箱</th>
						<th>电话</th>
						<th>出生日期</th>
						<th>头像</th>
						<th>修改</th>
						<th>删除</th>
					</tr>
				</thead>
				<tbody id="tb_query_adminInfo">
					<%-- <c:forEach items="${sessionScope.lstAdmins}" var="eachAdmin"
						varStatus="st">
						<tr>
							<th scope="row">${st.index+1  }</th>
							<td>${eachAdmin.adminName  }</td>
							<th>${eachAdmin.adminMail }</th>
							<th>${eachAdmin.adminTel }</th>
							<th>${eachAdmin.adminBirthday }</th>
							<th><img alt="头像" src="${basePath}${eachAdmin.adminImg}"> </th>
							<th><a href="${basePath}AdminInfoModifyAndDeleteServlet?aid=${eachAdmin.adminId}&op=0">修改</a></th>
							<th><a href="${basePath}AdminInfoModifyAndDeleteServlet?aid=${eachAdmin.adminId}&op=1" onclick="return confirm('你确认删除该用户名为[${eachAdmin.adminName}]记录么?')">删除</a></th>
						</tr>
					</c:forEach> --%>
				</tbody>
			</table>
			<div id="page">
				<!-- pagination所需容器 -->
				<div class="m-pagination"></div>
			</div>
		</div>
	</div>
</body>

</html>